import React from 'react'
import { useState, useEffect } from 'react'
import { Input } from 'antd-mobile'
import '../components/home/zbw-home/css/zbw-home/home.less'
import Swiper from '../components/home/zbw-home/mySwiper'
import { bannerList, serviceList, newsClass } from '../components/home/zbw-home/Api/HomeService'
import { JumboTabs } from 'antd-mobile'
import ServiceList from '../components/home/zbw-home/serviceList'
// import NewsList from '../components/home/zbw-home/css/zbw-home/newsList'
import News from './News'

export default function Home() {
    const [list, setList] = useState([])
    const [list2, setList2] = useState([])
    const [newsCl, setClass] = useState([])
    const initList = async () => {
        const data = await bannerList({
            type: 2,
            pageNum: 1,
            pageSize: 8
        })
        const middleList = (await serviceList()).data.rows
        const newsClPage = await newsClass()
        setClass(newsClPage.data)

        let tempList = [];

        if (middleList.length > 9) {
            tempList = middleList.slice(0, 9).concat([{ id: 0, serviceName: "全部服务", imgUrl: "/prod-api/profile/upload/image/2021/05/05/8f5d9d3a-3ac7-4e66-9d9a-630ba4bd80ef.png", link: 'all' }])
        } else {
            tempList = middleList;
        }

        setList2(tempList);
        console.log(list2);

        setList(data.data.rows)
    }
    useEffect(() => {


        initList()
        console.log(list2);

    }, [])
    return (
        <div className='w'>
            <div className='inp'>
                < Input
                    style={{ '--text-align': 'center', '--placeholder-color': 'var(--adm-color-light)' }}
                    placeholder='请输入内容' clearable />
            </div>
            <Swiper list={list}></Swiper>
            <ServiceList list={list2}></ServiceList>
            <div className='theme'><strong>新闻</strong></div>
            <div className='color'></div>
            <News></News>
        </div>
    )
}
